<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>脚本管理</title>
    <link rel="stylesheet" href="/css/element.css">
</head>
<body>
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/Qs.js"></script>
<script type="text/javascript" src="/js/layer.js"></script>
<!--拖动组件脚本-->
<script src="/js/Sortable.min.js"></script>
<script src="/js/vuedraggable.umd.min.js"></script>

<style>
    .el-container, #inputScript {
        height: 100%;
    }

    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
        text-align: center;
        height: 100%;
        padding-left:5px;
    }

    .el-main {
        color: #333;
        text-align: center;
        height: 100%;
        padding:0;
    }

    body > .el-container {
        margin-bottom: 40px;
        height: 100%;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }


    /*响应步骤框样式*/
    .box {
        overflow: auto;
        height:calc(100% - 228px);
    }

    .container_box {
        width: 25%;
        height: 280px;
        float: left;
        text-align: center;
        position: relative;
        padding: 5px 0;
    }

    .box div .content_box {
        border: 1px dashed #ccc;
        width: 80%;
        height: 90%;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        padding-top: 10px;
    }

    .box div .content_box:hover {
        border: 1px solid cornflowerblue;
    }

    .bz_title {
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translate(-50%, 0px);
        z-index: 9999999;
        background-color: #fff;
    }

    .search_box {
        height: 85px;
    }
    /*layui图标样式*/
    .search_box .layui-icon {
        vertical-align: middle;
        font-size: 20px;
        font-weight: bold;
        line-height: 20px;
    }
    /*拖拽候选框样式*/
    #box1 {
        text-align: left;
        overflow: hidden;
    }
    /*下划线样式*/
    .el-divider--horizontal {
        margin:28px 0 12px 0!important;
    }
    .list-group-item {
        float: left;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #00CED1;
        margin: 4px 0;
        width: 48%;
        margin-right: 2%;
        overflow: hidden;
    }

    .list-group-item:hover {
        cursor: move;
        background-color: #00BFFF;
    }

    /*响应步骤场景样式*/
    .list-group {
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #00CED1;
        margin: 8px 0;
        width: 90%;
        margin: 10px 5%;
        overflow: hidden;
    }

    .list-group:hover {
        cursor: move;
        background-color: #00BFFF;
    }

    .title_box {
        overflow: hidden;
        display: block;
    }

    .title_name {
        float: left;
        display: block;
    }

    .title_name span {
        display: inline-block;
        width: 3px;
        height: 21px;
        background-color: #44bfca;
        vertical-align: sub;
    }

    .title_name h3 {
        display: inline-block;
        font-weight: bolder;
    }

    .description li {
        margin: 4px;
        font-size:15px;
    }

    .el-card {
        border: none;
    }

    .el-row {
        margin: 0 !important;
    }

    /deep/ .layui-layout-admin .layui-body .layadmin-tabsbody-item {
        padding: 0 !important;
    }

    .el-card__body {
        height: 100%;
    }

</style>
<div id="inputScript">
    <el-container>
        <el-main>
            <el-card style="text-align: left;height:100%;">
                <el-form :model="scriptForm" :rules="rules" ref="ruleForm" size="medium">
                    <el-divider content-position="center">第一步 脚本基本信息</el-divider>

                    <el-form-item label="脚本名称" prop="name" label-width="90px">
                        <el-input
                                placeholder="脚本名称"
                                prefix-icon="el-icon-s-promotion"
                                v-model="scriptForm.name">
                        </el-input>
                    </el-form-item>
                    <el-row :gutter="20">
                        <el-col :span="10" style="padding-left:0;">
                            <el-form-item label="预案名称" prop="asid" label-width="90px"
                                          style="display: inline-block;width:100%;">
                                <el-select v-model="scriptForm.asid" placeholder="选择预案"
                                           style="margin-right:0.5%;width:100%;">
                                    <el-option
                                            v-for="item in asList"
                                            :key="item.index"
                                            :label="item.asName"
                                            :value="item.asid">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="事件级别" prop="level" label-width="90px"
                                          style="display: inline-block;width:100%;">
                                <el-select v-model="scriptForm.level" placeholder="选择事件级别" style="width:100%;">
                                    <el-option
                                            v-for="item in 4"
                                            :key="item.index"
                                            :label=`${item}级事件`
                                            :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" style="padding:0;">
                            <el-form-item
                                    style="display: inline-block; width:100%;text-align: right;">
                                <el-button size="medium" @click="submitForm('ruleForm')"
                                           :disabled="stepList.length==0?false:true">
                                    创建脚本框架
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>


                </el-form>
                <el-divider v-if="stepList.length==0?false:true" content-position="center">第二步 生成框架</el-divider>
                <div class="box" v-if="stepList.length==0?false:true">
                    <div class="container_box" v-for="(item,index) in stepList" :key="index">
                        <div ondrop="drop(event)" ondragover="allowDrop(event)" :id="item.stepid" class="content_box">
                            <span class="bz_title">响应步骤{{index+1}}</span>
                            <div :id="ii.id" ondragstart="dragmove(event)" v-for="ii in item.scenes" class="list-group"
                                 draggable="true">
                                {{ii.name}}
                            </div>
                        </div>
                    </div>
                </div>

            </el-card>
        </el-main>
        <el-aside width="300px">
            <el-card style="text-align:left;height:100%;">
                <div class="search_box">
                    <div class="title_box">
                        <div class="title_name">
                            <span></span>
                            <h3>场景模板搜索</h3>
                        </div>
                        <el-divider></el-divider>
                    </div>
                    <!--templateSearch-body-->
                    <el-form :model="searchForm" :rules="rules2" ref="form">
                        <el-form-item prop="keywords">
                                <el-input clearable style="width:75%;" size="medium" v-model="searchForm.keywords"
                                          placeholder="请输入关键字搜索"></el-input>
                                <el-button size="medium" @click="sceneTemSearchHandle('form')" style="width:23%;" icon="el-icon-search"></el-button>
                        </el-form-item>

                    </el-form>

                </div>

                <div style="margin-top:15px;height:231px;">
                    <div class="title_box">
                        <div class="title_name">
                            <span></span>
                            <h3>场景模板列表</h3>
                        </div>
                        <el-divider></el-divider>
                    </div>

                    <div id="box1" class="col-3">
                        <div ondragstart="drag(event)" :id="item.id" draggable="true" class="list-group-item"
                             cursor="move"
                             v-for="item in waitList"
                             :key="item.name">
                            {{ item.sceneName }}
                        </div>
                    </div>
                </div>

                <div class="description_box" style="margin-top:15px;height:calc(100% - 376px);overflow: auto;">
                    <div class="title_box">
                        <div class="title_name">
                            <span></span>
                            <h3>操作步骤说明</h3>
                        </div>
                        <el-divider></el-divider>
                    </div>
                    <div>
                        <ul class="description">
                            <li v-for="(item,index) in stepList" :key="index">{{index+1+'、' + item.stepName}}
                            </li>
                        </ul>
                    </div>
                </div>
            </el-card>
        </el-aside>
    </el-container>
</div>
<script>
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("sceneid", ev.target.id);
        console.log(ev.target.id);
    }

    function dragmove(ev) {
        ev.dataTransfer.setData("sceneid", ev.target.id);
        ev.dataTransfer.setData("type", "move");
    }

    function drop(ev) {
        var data = ev.dataTransfer.getData("sceneid");
        var id = ev.target.id;
        var scriptId = app.scriptid;
        var stepList = app.stepList;
        console.log('场景id(sceneid):' + data);
        console.log('步骤id(rid):' + id);
        console.log('脚本id(scriptid)：' + scriptId);
        //ev.target.appendChild(document.getElementById(data).clone());
        //添加脚本场景
        var formData = new FormData();
        formData.append("rid", id);
        formData.append("sceneid", data);
        formData.append("scriptid", scriptId);
        var url = '/script/add_scene';
        var flag = false;
        if (ev.dataTransfer.getData("type") == 'move') {
            url = '/script/change_scene';
            flag = true;
        }
        axios.post(url, formData).then(res => {
            if (res.data.success) {
                if (flag) {
                    app.changeScene(data, id);
                } else {
                    for (let i = 0; i < stepList.length; i++) {
                        if (stepList[i].stepid == id) {
                            app.stepList[i].scenes.push({name: res.data.data, id: res.data.id});
                        }
                    }
                }

            } else {
                app.$message(res.data.message);
            }

            console.log(stepList);
        }).catch(err => {
            console.log(err);
        })
        ev.preventDefault();
    }

    var qs = Qs;
    var app = new Vue({
        el: "#inputScript",
        data() {
            return {
                //搜索表单
                searchForm:{
                  keywords:""
                },
                scriptForm: {
                    asid: "",
                    level: "",
                    name: ""
                },
                //响应步骤数据
                stepList: [],
                //脚本id
                scriptid: "",
                input1: "",
                value1: "",
                value2: "",
                disabled: false,
                //定义要被拖拽对象的数组
                waitList: [],
                list1: [],
                list2: [],
                list3: [],
                list4: [],
                //所有预案数据
                asList: [],
                //表单校验
                rules: {
                    name: [
                        {required: true, message: '请输入脚本名称', trigger: 'blur'},
                    ],
                    asid: [
                        {required: true, message: '请选择预案', trigger: 'change'}
                    ],
                    level: [
                        {required: true, message: '请选择事件级别', trigger: 'change'}
                    ]
                },
                //表单校验规则
                rules2: {
                    keywords: [
                        { required: true, message: '请输入场景模板名称', trigger: 'blur' },
                        { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
                    ]
                },
            }
        },
        mounted() {
            this.urlJudgment();
            //查询所有预案
            this.asSearch();
            //默认搜索10个场景模板
            this.sceneTemSearch();
        },
        methods: {
            //判断是否为编辑脚本 //发请求初始化数据回显
            urlJudgment(){
              let url = window.location.hash;
              let index = url.indexOf("=");
              if(index == -1){
                  console.log("非编辑模式！");
                  return;
              }else {
                  let id = url.slice(index+1);
                  //存储脚本id到vue对象中
                  this.scriptid = id;
                  //调用 发请求 回显数据方法
                  this.initScriptForUpdate(id);
              }
            },
            log: function (evt) {
                window.console.log(evt);
            },
            //编辑脚本 发请求 数据回显
            initScriptForUpdate(id){
                let params = {scriptid:id};
                axios.get('/script/update_init',{params}).then(res=>{
                    let result = res.data.data;
                    console.log(result);
                    //表单回显赋值
                    this.scriptForm.asid = result.asid;
                    this.scriptForm.level = result.level;
                    this.scriptForm.name = result.name;
                    //步骤数据 回显
                    this.stepList = result.stepList;
                    console.log(this.stepList);
                }).catch(err=>{
                    console.log(err);
                })
            },
            //查询预案
            asSearch() {
                let params = {
                    categoryid: "",
                    keyword: ""
                }
                axios.get('/assumption/list', {params}).then(res => {
                    this.asList = res.data;
                }).catch(err => {
                    console.log(err);
                })
            },
            //创建脚本框架
            createScriptFrame() {
                let formdata = new FormData();
                let obj = this.scriptForm;
                for (let i in obj) {
                    formdata.append(i, obj[i]);
                }
                axios.post('/script/create', formdata).then(res => {
                    if (res.data.success) {
                        this.$message.success('创建成功！');
                        //按级别查询响应步骤
                        this.findResponseByLevel();
                        //存储脚本id
                        this.scriptid = res.data.scriptid;
                    } else {
                        this.$message.error(res.data.message);
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            //按级别查询响应步骤  /step/find_level
            findResponseByLevel() {
                let params = {
                    asid: this.scriptForm.asid,
                    i: this.scriptForm.level
                }
                axios.get('/step/find_level', {params}).then(res => {
                    var List = res.data.data;
                    for (var i = 0; i < List.length; i++) {
                        List[i].scenes = [];
                    }
                    //存储响应步骤数据
                    this.stepList = List;
                    // this.stepList[i].scenes.push({name: 111, id: 1});
                    // this.stepList[i].scenes.push({name: 555, id: 1});
                    console.log("999");
                    console.log(this.stepList);

                }).catch(err => {
                    console.log(err);
                })
            },
            sceneTemSearchHandle(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.sceneTemSearch();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //场景模板搜索 /scene/list
            sceneTemSearch() {
                let formData = new FormData();
                formData.append("name", this.searchForm.keywords);
                formData.append("page", 1);
                formData.append("pageSize", 10);
                axios.post('/scene/list', formData).then(res => {
                    this.waitList = res.data.content;
                }).catch(err => {
                    console.log(err);
                })
            },
            //表单校验
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.createScriptFrame();
                    } else {
                        return false;
                    }
                });
            },
            searchResponse: function (rid) {
                for (let i = 0; i < this.stepList.length; i++) {
                    if (this.stepList[i].stepid == rid) {
                        return i;
                    }
                }
                return -1;
            },
            changeScene: function (id, rid) {
                for (var i = 0; i < this.stepList.length; i++) {
                    for (var j = 0; j < this.stepList[i].scenes.length; j++) {
                        var item = this.stepList[i].scenes[j];
                        if (item.id == id) {

                            var rindex = this.searchResponse(rid);
                            if (rindex >= 0) {
                                this.stepList[rindex].scenes.push(item);
                                console.log(item);
                            }
                            this.stepList[i].scenes.splice(j, 1);
                            return;
                        }

                    }
                }
            }
        }
    });
</script>
</body>
</html>